<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bus(案例)</title>
    <script src="../../vue2.js"></script>
    <script src="../../axios.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleAxios">axios</button>

    <film-item v-for="data in datalist" :key="data.filmId" :mydata="data"></film-item>

    <film-synopsis></film-synopsis>
</div>
<script>
    //创建一个bus中央事件总线
    var bus = new Vue()
    //bus.$on -> 订阅
    //bus.$emit -> 发布

    Vue.component("filmItem", {
        props: ["mydata"],
        template: `

        <ul style="list-style: none; width: 600px;">
            <li style="border: 1px solid gray;border-radius: 3px;">
                <div style="display: flex;">
                    <img :src="mydata.poster" alt="" style="width: 105px;height: 150px;border-radius: 3px;">
                    <div style="padding: 10px 10px;display: flex;flex-direction: column;justify-content: space-between;">
                        <div style="display: flex;flex-direction: column;justify-content: space-between;">
                            <div>
                                {{ mydata.name }}&nbsp
                                <span style="color: #009ee6">{{ mydata.item.name }}</span>
                            </div>
                            <span>
                                {{ mydata.grade ? '观众评分&nbsp' : '暂无评分' }}
                                <span style="color: #fd792a">{{ mydata.grade ? mydata.grade : '  '}}</span>
                            </span>
                            <div>主演:
                                <span v-for="item in mydata.actors">
                                    {{ item.name }}
                                </span>
                            </div>
                            <span>
                                {{ mydata.nation }}&nbsp
                                |&nbsp
                                {{ mydata.runtime }}分钟
                            </span>
                        </div>
                        <div>
                            <button @click="handleClick">详情</button>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

        `,
        methods: {
            handleClick() {
                bus.$emit("myevent", this.mydata.synopsis)  //发布者
            }
        }
    })

    Vue.component("filmSynopsis", {

        data() {
            return {
                busData: "",   //因为Dom无法访问临时变量，所以需要设置一个状态来储存临时变量
            }
        },

        //生命周期
        //组件刚刚创建好就开始订阅
        mounted() {
            bus.$on("myevent", data => {   //订阅者
                this.busData = data;
            })
        },
        template: `

        <div style="width: 500px;height: 300px;position: fixed;top: 50%;right: 300px;transform: translateY(-50%);border: 1px solid skyblue">
            <span>{{ busData }}</span>
        </div>

        `
    })

    new Vue({
        el: "#box",
        data: {
            datalist: [],
            synopsisData: "",
        },
        methods: {
            handleAxios() {
                axios.get("/VUE/VUE2/json/maizuo.json").then(res => {
                    this.datalist = res.data.data.films
                })
            },
        }

    })
</script>
</body>
</html>